<template>
	<scroll-view
		:enable-flex="true"
		:show-scrollbar="false"
		@scrolltolower="lower"
		:scroll-y="true"
		style="width: 100%;height: 100vh; display: flex;flex-direction: column; align-items: center;"
	>
		<!-- item -->
		<view style="width: 702rpx;margin-top: 30rpx;" v-for="(item, index) in subscribeList" :key="index">
			<view style="width: 702rpx; display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" :src="item.thumbnail" style="width: 100rpx;height: 100rpx;" v-if="item.thumbnail"></image>
					<image mode="aspectFill" src="../static/emptu.png" style="width: 100rpx;height: 100rpx;" v-else></image>
					<view style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 29rpx;">
						<!-- 订单名称 -->
						<text style="font-size: 30rpx;color: #333333;">{{ item.post_title }}</text>
						<!-- 支付价格 -->
						<text style="font-size: 34rpx;color: #F96A15;">￥{{ item.post_cost }}</text>
					</view>
				</view>
				<!-- 订单状态 -->
				<text style="font-size: 22rpx;color: #3187FB;">{{ item.status }}</text>
			</view>
			<view style="width: 100%;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			limit: 10,
			id: '',
			subscribeList: [
				// {
				// 	/**
				// 	 * id预约id
				// 	 * post_cost金额
				// 	 * status未支付
				// 	 * post_title标题
				// 	 * thumbnail封面图
				// 	 */
				// },
			],
		};
	},
	onLoad() {
		// 取出用户id
		let that = this;
		uni.getStorage({
			key: 'user',
			success(res) {
				that.id = res.data.id;
				//获取数据
				that.getMysubscribe();
			},
			fail() {
				console.log('没有用户信息,去登陆');
				that.$Router.push({
					name: 'login',
				});
			},
		});
	},
	methods: {
		lower() {
			console.log('到达底部了');

			this.getMysubscribe();
		},
		async getMysubscribe() {
			//如果是初始化数据，就把page重置

			// 获取教练数据
			let res;
			try {
				res = await this.$request.post('api/User/subscribe', {
					data: {
						uid: this.id,
						page: this.page,
						limit: this.limit,
					},
				});
				if (res.data.code == 1) {
					this.subscribeList = [...this.subscribeList, ...res.data.data];
					this.page += 1;
				}
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			console.log('我的预约', res.data.data);
			// 把新数据追加到当前数组列为1,初始化数据为0
			// if (style == 1) {
			// 	this.subscribeList = this.subscribeList.concat(res.data.data);
			// } else {
			// 	this.subscribeList = res.data.data;
			// }
		},
	},
};
</script>

<style></style>
